<template>
  <a-row>
    <a-row class="upload-btn" :style="imgStyle" @click.native="uploadPicture('flagImg')">
      <a-row class="hover-in">
        <a-icon type="plus" class="hover-text" style="color: transparent; font-size: 20px; line-height: 20px;margin-top: 15px"/>
        <a-row  class="hover-text" style="color: transparent;line-height: 20px">
          选择图标
        </a-row>
      </a-row>
    </a-row>
    <!-- 剪裁组件弹窗 -->
    <cropper-image ref="cropper" @uploadSuccess = "handleUploadSuccess"/>
  </a-row>
</template>

<script>
import CropperImage from '@/components/panel/CropperImage'

export default {
  name: 'Tailoring',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: String
    }
  },
  components: { CropperImage },
  data () {
    return {
      imgStyle: {
        height: '80px',
        width: '80px',
        background: 'url(' + this.value + ') no-repeat 50%',
        backgroundSize: '100%'
      }
    }
  },
  methods: {
    // 封面设置
    uploadPicture (name) {
      this.$refs.cropper.title = '选择应用图标'
      this.$refs.cropper.visible = true
    },
    // 图片上传成功后
    handleUploadSuccess (data) {
      this.$emit('change', data)
    }
  },
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler: function (newV) {
        const url = 'url(' + newV + ') no-repeat 50%'
        // console.debug('image url changed:', url)
        this.imgStyle.background = url
      }
    }
  }
}
</script>
<style scoped lang="less">
.upload-list-cover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 40px;
  align-items: center;
  background: rgba(0, 0, 0, .6);
  opacity: 0;
  transition: opacity 1s;
}

.cover_icon {
  font-size: 30px;
}

.upload-btn {
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  text-align: center;
  .hover-in:hover{
    border-radius: 5px;
    width: 76px;
    height: 75px;
    background-color: rgba(12, 12, 12, 0.5);
    .hover-text{
      color: #FFFFFFE9 !important;
    }
  }
}

.upload-btn:hover {
  border: 2px solid #69b7ed;
}

.upload-btn i {
  margin: 5px;
}
</style>
